import { getalarmNumCompareApi } from '@/api/safeIndexApi';
import IconFont from '@/components/IconFont';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import { Empty, Select, Tooltip } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState, type FC } from 'react';
import Ostyle from './index.module.less';
const dateTypeOptions = [
  {
    label: '近一周',
    value: 6,
  },
  {
    label: '近一月',
    value: 29,
  },
];

const tipContent = '展示前五的驾驶行为（二级指标）的报警次数';

function vehicleCheckStatusColor(peerAverage: number, internalEnterprise: number) {
  if (peerAverage == 0 && internalEnterprise === 0) {
    // 等于同行平均和企业内部
    return '#999';
  } else if (peerAverage == 1 && internalEnterprise === 1) {
    // 大于同行平均和企业内部
    return '#FF3B3B';
  } else if (peerAverage == 2 && internalEnterprise === 2) {
    // 小于同行平均和企业内部
    return '#33CC67';
  } else {
    // 介于同行平均和企业内部
    return '#FFB13B';
  }
}

function driverCheckStatusColor(peerAverage: number) {
  return peerAverage == 1 ? '#FF3B3B' : peerAverage == 2 ? '#33CC67' : '#999';
}

/**
 * @desc 驾驶行为报警次数比较 dxr 20231222
 */
export const AlarmNumCompare: FC<any> = (props) => {
  console.log('props', props);
  const [list, setList] = useState<any>([]);
  const [queryTypeName, setQueryTypeName] = useState<string>(dateTypeOptions[0].label);
  const [params, setParams] = useState<any>({
    entId: props.entId,
    driverId: props.driverId,
    carId: props.carId,
    startTime: dayjs().subtract(6, 'days').format('YYYY-MM-DD'),
    endTime: dayjs().format('YYYY-MM-DD'),
  });
  const numkey = props.carId ? 'internalEnterprise' : 'peerAverage';
  useEffect(() => {}, []);
  const { run } = useRequest(
    async () => {
      return await getalarmNumCompareApi(params);
    },
    {
      refreshDeps: [params],
      onSuccess(res: any) {
        if (res.code == '200') {
          const data = res.data;
          if (data.length > 0) setList(data.splice(0, 5));
          else setList([]);
        }
      },
    },
  );

  return (
    <div className={Ostyle.alarmnumcompare_body}>
      <div className={Ostyle.cont_2_title}>
        驾驶行为报警次数比较
        <Tooltip placement="top" title={tipContent}>
          <QuestionCircleOutlined style={{ marginLeft: 5, color: '#999999' }} />
        </Tooltip>
        <Select<string>
          bordered={false}
          value={queryTypeName}
          onChange={(value, options: any) => {
            setQueryTypeName(options.label);
            if (!Array.isArray(options)) {
              // 计算开始结束时间
              params.startTime = dayjs().subtract(Number(value), 'days').format('YYYY-MM-DD');
              params.endTime = dayjs().format('YYYY-MM-DD');
              setParams(params);
              run();
            }
          }}
          options={dateTypeOptions}
          placement="bottomLeft"
          // getPopupContainer={(target) => {
          //   if (chartDom.current) {
          //     return chartDom.current;
          //   } else {
          //     return target;
          //   }
          // }}
        />
      </div>
      <div className={Ostyle.cont_2_cont}>
        {list.length > 0 ? (
          <>
            {list.map((el: any, index: number) => {
              return (
                <li key={index} className={Ostyle.cont_2_li}>
                  <div className={Ostyle.cont_2_left}>
                    <div className={Ostyle.cont_2_order}>{index + 1}</div>
                    <div>
                      <div className={Ostyle.cont_2_text1}>{el.alarmName}</div>
                      <div className={Ostyle.cont_2_bottom}>
                        {/* <div className={Ostyle.up_icon}></div> */}
                        <IconFont
                          style={{
                            marginRight: 4,
                            color: el[numkey] == 1 ? '#FF3B3B' : el[numkey] == 2 ? '#33CC67' : '#999',
                          }}
                          type={el[numkey] == 1 ? 'icon-xiangshang' : el[numkey] == 2 ? 'icon-xiangxia' : 'icon-dengyu'}
                        />
                        <div className={Ostyle.cont_2_text2}>{numkey == 'peerAverage' ? '同行平均' : '企业内部'}</div>
                      </div>
                    </div>
                  </div>
                  <div
                    className={Ostyle.cont_2_right}
                    style={{
                      marginRight: 4,
                      // color: el.peerAverage == 1 ? '#FF3B3B' : el.peerAverage == 2 ? '#33CC67' : '#999',
                      color:
                        numkey === 'internalEnterprise'
                          ? vehicleCheckStatusColor(el.peerAverage, el.internalEnterprise)
                          : driverCheckStatusColor(el.peerAverage),
                    }}
                  >
                    {/* {el.alarmNum} */}
                    {numkey == 'peerAverage' ? (
                      <>{el.alarmNum}次</>
                    ) : (
                      <>
                        <div className={Ostyle.cont_2_text1}>{el.alarmNum}次</div>
                        <div className={Ostyle.cont_2_bottom}>
                          <IconFont
                            style={{
                              marginRight: 4,
                              fontSize: 14,
                              color: el.peerAverage == 1 ? '#FF3B3B' : el.peerAverage == 2 ? '#33CC67' : '#999',
                            }}
                            type={
                              el.peerAverage == 1
                                ? 'icon-xiangshang'
                                : el.peerAverage == 2
                                ? 'icon-xiangxia'
                                : 'icon-dengyu'
                            }
                          />
                          <div className={Ostyle.cont_2_text2}>同行平均</div>
                        </div>
                      </>
                    )}
                  </div>
                </li>
              );
            })}
          </>
        ) : (
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
            <Empty />
          </div>
        )}
      </div>
    </div>
  );
};
